<template>
  <div v-show="self_isShow" class="alert-container">
    <div class="alert">
      <div class="flex word-break">{{msg}}</div>
      <div v-if="type === 'alert'">
        <div class="btnCommon success" @click="close">确定</div>
      </div>
      <div v-else class="space-round">
        <div class="btnCommon cancel" @click="cancelEvent">取消</div>
        <div class="btnCommon success" @click="confirmEvent">确定</div>
      </div>
    </div>
    <div class="mask" @click="choseMask"></div>
  </div>
</template>

<script>

export default {
  props: {
    type: {
      type: String,
      default: 'alert'
    },
    msg: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    },
    cancel: {
      type: Function,
      default: () => {
        console.log('你点击了取消按钮')
      }
    },
    confirm: {
      type: Function,
      default: () => {
        console.log('你点击了确定按钮')
      }
    }

  },
  data () {
    return {
      self_isShow: this.isShow
    }
  },
  watch: {
    isShow (val) {
      this.self_isShow = val
    }
  },
  methods: {
    close () {
      this.self_isShow = false
    },
    choseMask () {
      if (this.type === 'alert') {
        this.close()
      }
    },
    cancelEvent () {
      this.cancel()
      this.close()
    },
    confirmEvent () {
      this.confirm()
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
$btn-main: #009688;
$btn-secondary: #ededed;
$btn-dark: darken($btn-main, 4%);
.alert{
  display: flex;
  // flex-direction: column;
  // flex-wrap: nowrap;
  // 简写
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 160px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -80px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 5px 8px rgba($color: #000000, $alpha: .1);
  border-radius: 20px;
  z-index: 300;
}

.btnCommon {
  width: 105px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px;
  &.success{
    background-color: $btn-main;
    color: #fff;
    &:hover {
      background-color: $btn-dark;
    }
  }
  &.cancel {
    background-color: $btn-secondary;
    color: #333;
    &:hover {
      background-color: darken( $btn-secondary, 4%);
    }
  }
}

.space-round {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}

.flex {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

}

.word-break {
  // 允许单词内换行
  word-break:break-all;
  // 允许长单词换到下一行
  word-wrap:break-word;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: .2);
  z-index: 299;
}
</style>
